<template>
  <view :style="'background-color: #fff;'">
    <view
      class="region_left"
    >
      <scroll-view
        scroll-y="true"
        class="Leftscroll-Y"
        :show-scrollbar="false"
        :style="'width: ' + navWhith + 'rpx;max-height:'+swiperHeight+'px;float:left;background:' + bgDefault"
      >
        <view
          v-for="(item,index) in navList"
          :key="index"
          :class="navNow==index ? 'navDefault navActive' : 'navDefault'"
          :style="navNow==index ? 'background:' + bgActive : ''"
          @click="onNav(item, index)"
        >{{ item[showKey] }}</view>
        <template
          v-if="bottomStation"
        >
          <view
            v-for="(numItem, numIndex) in 2"
            :key="numIndex"
            :class="'navDefault'"
          />
        </template>
      </scroll-view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'LeftNav',
  props: {
    navList: {
      type: Array,
      default: null
    },
    showKey: {
      type: String,
      default: ''
    },
    navWhith: {
      type: Number,
      default: 0
    },
    swiperHeight: {
      type: Number,
      default: 0
    },
    displayMultipleItems: {
      type: Number,
      default: 0
    },
    navSelected: {
      type: Number,
      default: 0
    },
    bgActive: {
      type: String,
      default: '#F5F5F5'
    },
    bgDefault: {
      type: String,
      default: '#FBFBFB'
    },
    bottomStation: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      navNow: 0,
    }
  },
  computed: {
    curNavSelected() {
      return this.navSelected
    }
  },
  watch: {
    navSelected(index) {
      this.navNow = index
    }
  },
  mounted() {
    // console.log('this.curNavSelected :>> ', this.curNavSelected);
    this.navNow = this.curNavSelected
  },
  methods: {
    onNav(item, activeId) {
      this.navNow = activeId
      this.$emit('update:navSelected', activeId)
      this.$emit('leftNavFn', item)
    },
  }
}
</script>

<style lang="scss" scoped>
.region_left {
  flex-shrink: 0;
  .Leftscroll-Y {
    box-sizing: border-box;
    height: 100%;
    //background: #f5f5f5;
  }
}
.swiper-item{
  height: 88rpx!important;
}
.navDefault{
  height: 88rpx;
  line-height: 88rpx;
  font-size: 28rpx;
  //background-color: #fff;
  color: #222222;
  padding: 0 16rpx;
  text-align: center;
  overflow:hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.navActive{
  color: #FF5533;
  position: relative;
  background: #fff;
}
.navActive:after{
  position: absolute;
  left: 0;
  top: 24rpx;
  width: 8rpx;
  height: 40rpx;
  border-radius: 0 4rpx 4rpx 0;
  background: #FF5533;
  content: ' ';
}
</style>
